<template>
    <div class="elegantDemeanor">
        <div class="title">
<!--          <img src="../../../assets/images/sight.png" />-->
          <p>学员风采</p>
        </div>

      <div class="picBox">
        <div v-for="(item,index) in picList" :key="index" :style="`background-image: url(${item.src})`">
          {{item.title}}
        </div>
      </div>
<!--        <div class="pic-box">-->
<!--            <div class="waterfull-box">-->
<!--                <vue-waterfall-easy :imgsArr="picList" :imgWidth="390" :maxCols="3" :imgHeight="390" :gap="10" :loadingDotCount='0' class="test">-->
<!--&lt;!&ndash;                  <div>&ndash;&gt;-->
<!--&lt;!&ndash;                          &ndash;&gt;-->
<!--                    <div slot-scope="props"-->
<!--                         style="padding: 10px;color: #666666;overflow: hidden"-->
<!--                    >-->
<!--                      <div class="item" effect="dark" :content="props.value.info" placement="bottom">-->
<!--                        <div>{{props.value.title}}</div>-->
<!--                      </div>-->
<!--                    </div>-->
<!--&lt;!&ndash;                  </div>&ndash;&gt;-->

<!--                </vue-waterfall-easy>-->
<!--            </div>-->

<!--        </div>-->
    </div>
</template>

<script>
  // import vueWaterfallEasy from 'vue-waterfall-easy'
  export default {
    name: 'elegantDemeanor',
    props:{
      picList:Array
    },
    components:{
      // vueWaterfallEasy
    },
  }
</script>

<style scoped lang="less">
    .elegantDemeanor{
      margin: auto;
      width: 1200px;
        .title{
            display: flex;
            margin:0px 0px 20px 0;
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            text-align: left;
            img{
                padding-right: 6px;
            }
        }
      .picBox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        div {
          //padding: 10px;
          margin-bottom: 20px;
          width: 390px;
          height: 240px;
          color: rgba(255, 255, 255, 1);
          line-height: 240px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
        //.pic-box{
        //    position: relative;
        //    width: 100%;
        //    height: 1465px;
        //    ::v-deep.waterfull-box{
        //        position: absolute;
        //        top:6px;
        //        bottom:0;
        //        width:100%;
        //        .vue-waterfall-easy-scroll{
        //            overflow-y: auto;
        //        }
        //    }
        //}
    }

</style>
